
<template>
  <div class="welcome-page">
    <h1>欢迎，管理员！</h1>
    <p>您可以在这里管理用户信息。</p>
    <button @click="goBackToLogin">返回登录</button>
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>操作</th>
      </tr>
      <tr v-for="(user, index) in users" :key="index">
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.address }}</td>
        <td>
          <button @click="editUser(index)">编辑</button>
          <button @click="deleteUser(index)">删除</button>
        </td>
      </tr>
    </table>
    <button @click="addNewUser">新增用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 24, address: '上海市' },
        { name: '李四', age: 27, address: '北京市' },
        { name: '王五', age: 29, address: '广州市' }
      ]
    };
  },
  methods: {
    goBackToLogin() {
      this.$router.push('/');
    },
    editUser(index) {
      console.log(`Editing user at index ${index}`);
      // 这里可以编写编辑用户的逻辑
    },
    deleteUser(index) {
      this.users.splice(index, 1);
      console.log(`Deleted user at index ${index}`);
    },
    addNewUser() {
      console.log('Adding new user');
      // 这里可以编写添加新用户的逻辑
    }
  }
}
</script>

<style scoped>
.welcome-page {
  text-align: center;
  margin-top: 20px;
}

table {
  width: 80%;
  margin: auto;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 10px;
}

button {
  margin-top: 10px;
}
</style>
